<template>
  <Modal v-model="getShowModal" title="编辑菜单" width="420" @on-ok="onAddMenu(formValidate)" @on-cancel="onCancel">
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
      <Form-item label="菜单名" prop="name">
        <Input v-model="formValidate.name" placeholder="请输入菜单名"></Input>
      </Form-item>
      <Form-item label="菜单路由" prop="menuName">
        <Input v-model="formValidate.menuName" placeholder="请输入菜单路由"></Input>
      </Form-item>
      <Form-item label="父节点Id" prop="parentId">
        <Input v-model="formValidate.parentId" placeholder="请输入菜单父节点Id"></Input>
      </Form-item>
      <Form-item label="是否隐藏" prop="isHidden">
        <Input v-model="formValidate.isHidden" placeholder="请输入菜单Hidden"></Input>
      </Form-item>
      <Form-item label="排序" prop="sort">
        <Input v-model="formValidate.sort" placeholder="请输入菜单名"></Input>
      </Form-item>
    </Form>
    <diV slot="footer">
      <Button type="primary" @click="handleSubmit('formValidate')" >提交</Button>
    </diV>
  </Modal>
</template>

<script>
import {editMenu} from '@/api/menu.js'
export default {
  props: ['menuData', 'showModal'],
  data () {
    return {
      formValidate: {
        name: '' + this.menuData.name,
        menuName: '' + this.menuData.menuName,
        parentId: this.menuData.parentId,
        isHidden: this.menuData.isHidden,
        sort: this.menuData.sort
      },
      ruleValidate: {
        name: [
          { required: true, message: '菜单名不能为空', trigger: 'blur' }
        ],
        menuName: [
          { required: true, message: '菜单路由不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleSubmit (name) {
      console.log('handleSubmit', name)
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.onAddMenu()
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    onAddMenu () {
      console.log('onAddMenu', this.formValidate)
      let d = {
        intValues: [parseInt(this.formValidate.sort), parseInt(this.formValidate.isHidden)],
        longValues: [this.menuData.id, parseFloat(this.formValidate.parentId)],
        strValues: [this.formValidate.menuName, this.formValidate.name]
      }
      editMenu(d).then(data => {
        console.log(data)
        this.$emit('closeEditMenu')
      })
    },
    onCancel () {
      console.log('onCancel')
      this.$emit('closeEditMenu')
    }
  },
  computed: {
    getShowModal () {
      this.formValidate.name = '' + this.menuData.name
      this.formValidate.menuName = '' + this.menuData.menuName
      this.formValidate.parentId = this.menuData.parentId
      this.formValidate.isHidden = this.menuData.isHidden
      this.formValidate.sort = this.menuData.sort
      return this.showModal
    }
  }
}
</script>

<style>

</style>
